Skip to content

#736 Configure Required Field Indicators#737

Merged
tariqksoliman merged 1 commit intodevelopmentfrom
ts-736
Aug 29, 2025
Merged

#736 Configure Required Field Indicators#737
tariqksoliman merged 1 commit intodevelopmentfrom
ts-736

Conversation

@tariqksoliman
Copy link
Copy Markdown
Member

Closes #736

With Claude 4 Sonnet (Bedrock)

PR Summary: Add Required Field Indicators to MMGIS Configure Page


Overview

This PR implements visual indicators for required fields in the MMGIS configuration interface.
Previously, users would only discover missing required fields after attempting to save, which led to a poor user experience. This change adds real-time validation feedback and a visual indicator on the save button when required fields are empty.


Changes Made

1. Added Required Field Metadata to Configuration Files

  • Updated all layer configuration JSON files (layer-*.json) to include required: true for mandatory fields.
  • Added conditionalRequired support for fields that are only required under specific conditions (e.g., URL is required for vector layers unless controlled is true).
  • Updated configuration files:
    • layer-header-config.jsonLayer name
    • layer-tile-config.jsonName, URL, minZoom, maxNativeZoom, maxZoom
    • layer-data-config.jsonName, demtileurl, minZoom, maxNativeZoom, maxZoom
    • layer-vector-config.jsonName, URL (conditionally required)
    • layer-vectortile-config.jsonName, URL, minZoom, maxNativeZoom, maxZoom (added missing maxNativeZoom)
    • layer-query-config.jsonName, query.endpoint
    • layer-model-config.jsonName, URL, position fields, rotation fields, scale
    • layer-velocity-config.jsonName, URL (conditionally required)
    • layer-image-config.jsonName, URL, minZoom, maxNativeZoom, maxZoom
    • tab-home-config.jsonInitial view coordinates (latitude, longitude, zoom)

2. Created Validation System

  • Added validators.js with functions that mirror backend validation rules:
    • validateConfiguration() – Validates top-level required fields (msv, layers, tools)
    • validateLayer() – Validates layer-specific requirements based on layer type
    • isFieldRequired() – Determines if a field is required (including conditional logic)
    • getAllValidationErrors() – Returns all validation errors for the full configuration

3. Updated Maker Component

  • Added real-time validation for field types: text, textnotrim, and number
  • Visual feedback:
    • Red underline for empty required fields
    • “This field is required” helper text beneath invalid fields
  • Styling:
    • Introduced noMarginHelperText style to remove left margin from helper text
  • Integrated with validation system to assess requirements dynamically

4. Enhanced Redux Store

  • Added validationErrors state to track all validation issues
  • Automatically validates configuration when changes occur
  • Added setValidationErrors action for manual validation control

5. Updated SaveBar Component

  • Added a red circle indicator when validation errors are present
  • Positioned indicator with margin-left: 6px as requested
  • Save functionality remains available — backend will still catch any errors
  • The indicator acts as a visual warning that required fields are missing

Technical Details

  • Utilized Material-UI’s form validation props: error and helperText
  • Validation logic mirrors backend requirements from API/Backend/Config/validate.js
  • Full support for conditional field requirements (e.g., vector layer URL if not controlled)
  • All code follows existing style and structure conventions

Benefits

  1. Improved User Experience – Users immediately see which fields are required
  2. Reduced Errors – Real-time validation helps users resolve issues before saving
  3. Better Visibility – Save button indicator gives immediate feedback on form validity
  4. Consistency – Frontend validation aligns with backend expectations

Testing Recommendations

  1. Test all layer types to ensure required fields trigger error states when empty
  2. Verify conditional logic (e.g., vector layer URL when controlled is true/false)
  3. Confirm save button shows red indicator when any required field is missing
  4. Ensure validation clears appropriately when fields are filled
  5. Attempt saving to confirm backend error messages are still shown when needed

@tariqksoliman tariqksoliman self-assigned this Aug 29, 2025
@tariqksoliman tariqksoliman added the enhancement For making an existing feature better label Aug 29, 2025
@tariqksoliman tariqksoliman merged commit d7f5a46 into development Aug 29, 2025
1 check passed
@tariqksoliman tariqksoliman deleted the ts-736 branch August 29, 2025 02:08
@github-project-automation github-project-automation bot moved this to Done in MMGIS Aug 29, 2025
@sonarqubecloud
Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
11.8% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

tariqksoliman added a commit that referenced this pull request Sep 8, 2025
* Use PolyMeasure to draw great circle lines with Measure Tool

* Round meters to two digits on Measure tool x-axis

* Added option to not display PolylineMeasure tooltips

* Fix bug with noDataValue for single banded COGs (#700)

* Fixed issue where rubberline is not drawn with first click or after zoom

* Fix critical security vulnerabilities identified in SonarQube analysis (#701)

* Fix critical security vulnerabilities identified in SonarQube analysis

This commit addresses 8 legitimate security vulnerabilities while documenting
13 false positives that had adequate existing protections.

Security fixes implemented:

**Path Injection Vulnerabilities (3 issues fixed):**
- middleware.js: Added URL validation requiring /Missions prefix and blocking
  directory traversal sequences (../ and ..\)
- configs.js: Fixed flawed validation logic (AND→OR) and added directory
  traversal protection for mission names

**Cross-Site Scripting (1 issue fixed):**
- configs.js: Added sanitizeInput() function to escape HTML entities in error
  messages containing user-controlled data, preventing reflected XSS attacks

**Insecure Temporary File Creation (4 sample fixes):**
- Replaced insecure tempfile.mktemp() with tempfile.mkstemp() in:
  - auxiliary/demtiles/gdal2demtiles.py (lines 839, 874)
  - auxiliary/gdal2tiles4extent/gdal2tiles4extent.py (line 521)
  - auxiliary/gdal2customtiles/legacy/gdal2customtiles.py (line 601)
- Eliminates race condition vulnerabilities in GDAL processing scripts

**False Positives Documented:**
- SQL Injection (5 issues): Existing parameterized queries and input
  sanitization provide adequate protection
- Analysis details in reviewed_findings.md

All fixes maintain backward compatibility while significantly improving
security posture. Remaining auxiliary Python scripts follow the same
tempfile pattern for completion.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Tweaks to critical security vulnerability fixes

* Support .. as long as it stays within /Missions

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Tariq Soliman <Tariq.K.Soliman@jpl.nasa.gov>

* Minor fix: sort geodataset results

* Make sure polyline measurements are cleared on reset

* #702 Fix LayersTool filtering on non-dynamicExtent props-on-click geodatasets (#703)

* Minor fix: more versatile Help root pathing

* #704 Upgrade All Adjacent Servers (#705)

* Don't use polyline with LOS or else it results in two lines

* Make sure rubberline gets drawn in continuous modes

* Ensure line of sight follows great circle and polyline display cleanup

* Update Dockerfile to update certs

* Use LOS technique to draw great circle lines with varying colors

* Show great circle line even if no DEM #52

* #708 User Account Management (#711)

* #708 User Account Management 1

* #708 user account control part 2

* #708 user account management part 3

* User account control part 4

* #708 minor style tweaks

* Minor resetPassword link fix

* Use contours on all login pages

* #712 Fix some security issues (#713)

* #714 Configurable Wrapping for 2D Map (#715)

* #714 Map maxbounds

* #714 apply to projected maps too

* #716 Per Mission Permissions (#717)

* #716 Per-Mission Permission part 1

* #716 Per Mission Permissions

* #718 Globe Controls clash with Separated Tool buttons in the UI (#719)

* Added multi-platform build to support arm64 architecture

* Fix ensureUser for new Admins

* Separate platform builds and append -arm64 to the end of arm64 images

* Use separate ARM64 runner for faster ARM64 Docker builds

* Fix arm64 tag assignment syntax

* Use a prerendered image for the layer legend #658

* #721 Show, Delete, and Search for individual STAC items (#723)

* #721 STAC item UI part 1

* #721 STAC item UI part 2

* Bump version 4.0.0 -> 4.1.0

* Adjust legend width based on legend image up to 300px

* #724 Legends Max on top (#725)

* Add feature to set Layer header expanded state individually (#726)

* Expand layers feature

* Fix bug with keeping header expanded/unexpanded state

* Expand individual headers only if LayersTool.vars.expanded is not set to true

* #727 STAC item regex search and bulk delete (#728)

* #727 Stac item regex, bbox, bulk delete support part 1

* #727 Support 32bit stac items in map

* #729 Default configuration for live mode (#730)

* #731 Projection Tab Autocomplete, Case Insensitive Mission Sorting, Smart field dsiabling in /configure (#732)

* Filter out blank csv entries in csvToJSON function (#734)

* Add amd64 image suffix and build it last

* Use regular docker build instead of buildx

* Add Legend tool display options (#735)

* Add configuration options

* Add header options for legend tool

* Improve syntax

* #736 Configure Required Field Indicators (#737)

* #738 Fix GeoDataset LOCAL (#739)

* #740 Add mission planet radii (#741)

* Add legend-based property styling for vector layers

* #742 Configure Preview iframe to respect subpaths (#744)

* #709 Improved Continuous Legend Symbology Styling

* #745 Live Follow Mode (#746)

---------

Co-authored-by: Joe Roberts <joe.t.roberts@jpl.nasa.gov>
Co-authored-by: ac-61 <ac-61@users.noreply.github.com>
Co-authored-by: Jeff Leach <jl-0@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Joe T. Roberts <5315956+jtroberts@users.noreply.github.com>
tariqksoliman added a commit that referenced this pull request Sep 9, 2025
* #699 planetcantile p1

* #699 Add planetcantile

* #699 Add untested EPSG:3413 TileMatrixSet

* #699 Update Feature Branch (#747)

* Use PolyMeasure to draw great circle lines with Measure Tool

* Round meters to two digits on Measure tool x-axis

* Added option to not display PolylineMeasure tooltips

* Fix bug with noDataValue for single banded COGs (#700)

* Fixed issue where rubberline is not drawn with first click or after zoom

* Fix critical security vulnerabilities identified in SonarQube analysis (#701)

* Fix critical security vulnerabilities identified in SonarQube analysis

This commit addresses 8 legitimate security vulnerabilities while documenting
13 false positives that had adequate existing protections.

Security fixes implemented:

**Path Injection Vulnerabilities (3 issues fixed):**
- middleware.js: Added URL validation requiring /Missions prefix and blocking
  directory traversal sequences (../ and ..\)
- configs.js: Fixed flawed validation logic (AND→OR) and added directory
  traversal protection for mission names

**Cross-Site Scripting (1 issue fixed):**
- configs.js: Added sanitizeInput() function to escape HTML entities in error
  messages containing user-controlled data, preventing reflected XSS attacks

**Insecure Temporary File Creation (4 sample fixes):**
- Replaced insecure tempfile.mktemp() with tempfile.mkstemp() in:
  - auxiliary/demtiles/gdal2demtiles.py (lines 839, 874)
  - auxiliary/gdal2tiles4extent/gdal2tiles4extent.py (line 521)
  - auxiliary/gdal2customtiles/legacy/gdal2customtiles.py (line 601)
- Eliminates race condition vulnerabilities in GDAL processing scripts

**False Positives Documented:**
- SQL Injection (5 issues): Existing parameterized queries and input
  sanitization provide adequate protection
- Analysis details in reviewed_findings.md

All fixes maintain backward compatibility while significantly improving
security posture. Remaining auxiliary Python scripts follow the same
tempfile pattern for completion.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Tweaks to critical security vulnerability fixes

* Support .. as long as it stays within /Missions

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Tariq Soliman <Tariq.K.Soliman@jpl.nasa.gov>

* Minor fix: sort geodataset results

* Make sure polyline measurements are cleared on reset

* #702 Fix LayersTool filtering on non-dynamicExtent props-on-click geodatasets (#703)

* Minor fix: more versatile Help root pathing

* #704 Upgrade All Adjacent Servers (#705)

* Don't use polyline with LOS or else it results in two lines

* Make sure rubberline gets drawn in continuous modes

* Ensure line of sight follows great circle and polyline display cleanup

* Update Dockerfile to update certs

* Use LOS technique to draw great circle lines with varying colors

* Show great circle line even if no DEM #52

* #708 User Account Management (#711)

* #708 User Account Management 1

* #708 user account control part 2

* #708 user account management part 3

* User account control part 4

* #708 minor style tweaks

* Minor resetPassword link fix

* Use contours on all login pages

* #712 Fix some security issues (#713)

* #714 Configurable Wrapping for 2D Map (#715)

* #714 Map maxbounds

* #714 apply to projected maps too

* #716 Per Mission Permissions (#717)

* #716 Per-Mission Permission part 1

* #716 Per Mission Permissions

* #718 Globe Controls clash with Separated Tool buttons in the UI (#719)

* Added multi-platform build to support arm64 architecture

* Fix ensureUser for new Admins

* Separate platform builds and append -arm64 to the end of arm64 images

* Use separate ARM64 runner for faster ARM64 Docker builds

* Fix arm64 tag assignment syntax

* Use a prerendered image for the layer legend #658

* #721 Show, Delete, and Search for individual STAC items (#723)

* #721 STAC item UI part 1

* #721 STAC item UI part 2

* Bump version 4.0.0 -> 4.1.0

* Adjust legend width based on legend image up to 300px

* #724 Legends Max on top (#725)

* Add feature to set Layer header expanded state individually (#726)

* Expand layers feature

* Fix bug with keeping header expanded/unexpanded state

* Expand individual headers only if LayersTool.vars.expanded is not set to true

* #727 STAC item regex search and bulk delete (#728)

* #727 Stac item regex, bbox, bulk delete support part 1

* #727 Support 32bit stac items in map

* #729 Default configuration for live mode (#730)

* #731 Projection Tab Autocomplete, Case Insensitive Mission Sorting, Smart field dsiabling in /configure (#732)

* Filter out blank csv entries in csvToJSON function (#734)

* Add amd64 image suffix and build it last

* Use regular docker build instead of buildx

* Add Legend tool display options (#735)

* Add configuration options

* Add header options for legend tool

* Improve syntax

* #736 Configure Required Field Indicators (#737)

* #738 Fix GeoDataset LOCAL (#739)

* #740 Add mission planet radii (#741)

* Add legend-based property styling for vector layers

* #742 Configure Preview iframe to respect subpaths (#744)

* #709 Improved Continuous Legend Symbology Styling

* #745 Live Follow Mode (#746)

---------

Co-authored-by: Joe Roberts <joe.t.roberts@jpl.nasa.gov>
Co-authored-by: ac-61 <ac-61@users.noreply.github.com>
Co-authored-by: Jeff Leach <jl-0@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Joe T. Roberts <5315956+jtroberts@users.noreply.github.com>

* #699 Add EPSG:3413

---------

Co-authored-by: Joe Roberts <joe.t.roberts@jpl.nasa.gov>
Co-authored-by: ac-61 <ac-61@users.noreply.github.com>
Co-authored-by: Jeff Leach <jl-0@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Joe T. Roberts <5315956+jtroberts@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement For making an existing feature better

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

[New Feature]: Configure Required Field Indicators

1 participant